<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="文档管理">
<meta name="author" content="文档管理">
<title>如何实现 layout 功能 文档管理</title>
<link href="./assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="./assets/css/docs.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/highlight.js/7.3/styles/github.min.css" rel="stylesheet">
<style>
body{font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, .lead {font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;}
pre code { background: transparent; }
@media (min-width: 768px) {
    .bs-docs-home .bs-social, 
    .bs-docs-home .bs-masthead-links {
      margin-left: 0;
    }
}
.bs-docs-section p {
	line-height: 2;
}
.bs-docs-section p.lead {
	line-height: 1.4;
}
</style>
<!--[if lt IE 9]><script src="../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../docs-assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="shortcut icon" href="../docs-assets/ico/favicon.png">
  </head>
  <body>
    <a class="sr-only" href="#content">Skip to main content</a>

    <!-- Docs master nav -->
    <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="./overview.html" class="navbar-brand">文档管理</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
       		<li  ><a href="overview.html">简介</a></li>
            <li ><a href="download.html">下载</a></li>
            <li ><a href="userguide.html">开发指南</a></li>
            <li ><a href="config.html">配置指南</a></li>
            <li ><a href="syntax.html">语法指南</a></li>
            <li ><a href="integrate.html">Web 框架集成</a></li>
            <!--
            <li ><a href="example.html">例子</a></li>
            -->
            <li ><a href="faq.html" class="selected">FAQ</a></li>
            <li ><a href="about.html">关于</a></li>
      </ul>
    </nav>
  </div>
</header>
    <!-- Docs page layout -->
    <div class="bs-header" id="content">
      <div class="container">
        <h2>如何实现 layout 功能</h2>
        <p></p>
      </div>
    </div>
	<a href="#top" id="toTop"></a>
    <!-- Callout for the old docs link -->
    <div class="container bs-docs-container">
      <div class="row">
        <div class="col-md-3">
          <div class="bs-sidebar hidden-print" role="complementary">
            <ul class="nav bs-sidenav">
            <li><a href="#x1867624595">1 在 jetbrick-template 中如何实现 layout 功能</a></li>
            <li><a href="#x753318042">&nbsp&nbsp1.1 常规模式</a></li>
            <li><a href="#x670265539">&nbsp&nbsp1.2 变种模式</a></li>
            <li><a href="#x38438688">&nbsp&nbsp1.3 #tag layout(file, ...)</a></li>
            <li><a href="#x902247563">&nbsp&nbsp1.4 组合 #tag block() + #inlcude</a></li>
            <li><a href="#x749955107">&nbsp&nbsp1.5 block 的默认值和重载</a></li>
            <li><a href="#x796152">&nbsp&nbsp1.6 总结</a></li>
            </ul>
          </div>
        </div>
	        <div class="col-md-9" role="main">
	         <div class="bs-docs-section">
	           <h1 id="x1867624595" class="page-header"><span>1 在 jetbrick-template 中如何实现 layout 功能</span></h1>
<p>通常页面都有一个布局，大体上有页面头部，尾部，以及正文三部分。头部和尾部内容基本上固定，只有正文是变化的。</p>
<p>jetbrick-template 可以使用 3 种方法实现模板的 layout 功能。</p> 
<ol> 
 <li><code>#include(file, ...)</code> 指令</li> 
 <li><code>#tag layout(file, ...)</code> 标签</li> 
 <li><code>#tag block(name)</code> + <code>#inlcude(file, ...)</code> 组合</li> 
</ol>
<h2 id="x753318042" class="page-header"><span>1.1 常规模式</span></h2>
<p>我们将页面公共部分放在 include 文件中，然后在每个页面中应用 include 文件来实现内容共享。</p>
<p>main.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">#include(&quot;/include/header.jetx&quot;)
&lt;table&gt;  
  这是正文内容  
&lt;/table&gt;  
#include(&quot;/include/footer.jetx&quot;)
</code></pre>
</div>
<p>这个不算 layout?<br />呵呵，继续放下看。</p>
<h2 id="x670265539" class="page-header"><span>1.2 变种模式</span></h2>
<p>常规模式中，只是共享了一些公共内容，但是并没有实现真正的 layout，因为 layout 一变，include 的方式可能就会发生变化，这样所有文件都要重新 include，不是很方便。</p>
<p>下面就是 #include 模式的变种（动态 include），来实现真正的 layout。</p>
<p>layout.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;${title}&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;header&quot;&gt;This is a logo image.&lt;/div&gt;

    #include(parameter.pageUrl)

    &lt;div class=&quot;footer&quot;&gt;Copyright @2000-2010, All Rights Reserved.&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
<p>main.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">&lt;table&gt;  
  这是正文内容  
&lt;/table&gt;
</code></pre>
</div>
<p>Action.java</p> 
<div class="highlight">
 <pre><code class="language-html">String url = &quot;/layout.jetx?pageUrl=&quot; + URLEncoder.encode(&quot;/main.jetx&quot;, &quot;utf-8);
RequestDispatcher rd = getServletContext().getRequestDispatcher(url);
rd.forward(request, response);
</code></pre>
</div>
<p>怎么样？通过一个 pageUrl 参数来达到动态 layout 的目的，这样我们以后只要修改layout.jetx 文件就能达到修改所有页面布局了。</p>
<p>URL 访问方法： <a href="http://127.0.0.1:8080/layout.jetx?pageUrl=main.jetx">http://127.0.0.1:8080/layout.jetx?pageUrl=main.jetx</a></p>
<h2 id="x38438688" class="page-header"><span>1.3 #tag layout(file, ...)</span></h2>
<p>这里再介绍一种采用 layout 自定义标签来实现。</p>
<p>layout.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;${title}&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;header&quot;&gt;This is a logo image.&lt;/div&gt;

    ${bodyContent}

    &lt;div class=&quot;footer&quot;&gt;Copyright @2000-2010, All Rights Reserved.&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
<p>main.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">#tag layout(&quot;layout.jetx&quot;) 
&lt;table&gt;  
  这是正文内容  
&lt;/table&gt;
#end
</code></pre>
</div>
<p>layout 标签允许指定一个 layout 模板文件，在渲染页面的时候，会将layout标签体的渲染内容作为一个 bodyContent 变量插入到 layout 指定模板文件里。</p>
<p>这样，我们就可以通过直接访问 <a href="http://127.0.0.1:8080/main.jetx">http://127.0.0.1:8080/main.jetx</a></p>
<h2 id="x902247563" class="page-header"><span>1.4 组合 #tag block() + #inlcude</span></h2>
<p>上面的 #tag layout() 标签只能嵌入一块自定义的内容 <code>${bodyContent}</code>，那么如果想要嵌入多个自定义的变量块呢？</p>
<p>main.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">#tag block(&quot;bodyContent1&quot;)
    BODY 1111
#end
#tag block(&quot;bodyContent2&quot;)
    BODY 2222
#end
#include (&quot;layout.jetx&quot;)
</code></pre>
</div>
<p>layout.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">This is a header.
&lt;div&gt;
    ${bodyContent1}
&lt;/div&gt;
&lt;div&gt;
    ${bodyContent2}
&lt;/div&gt;
This is a footer.
</code></pre>
</div>
<p>输出结果：</p> 
<div class="highlight">
 <pre><code class="language-html">This is a header.
&lt;div&gt;
    BODY 1111
&lt;/div&gt;
&lt;div&gt;
    BODY 2222
&lt;/div&gt;
This is a footer.
</code></pre>
</div>
<p>怎么样？现在就可以随意的进行组合了。</p>
<h2 id="x749955107" class="page-header"><span>1.5 block 的默认值和重载</span></h2>
<p>在 layout.jetx 中，我们也可以定义默认内容，在 main.jetx 中对默认内容进行重载，如下：</p>
<p>layout.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">This is a header.
&lt;div&gt;
#tag default_block(&quot;bodyContent1&quot;)
    This is a default BODY 1111
#end
&lt;/div&gt;
&lt;div&gt;
#tag default_block(&quot;bodyContent2&quot;)
    This is a default BODY 2222
#end
&lt;/div&gt;
This is a footer.
</code></pre>
</div>
<p>main.jetx</p> 
<div class="highlight">
 <pre><code class="language-html">#tag block(&quot;bodyContent1&quot;)
    Override block 111
#end
#include (&quot;layout.jetx&quot;)
</code></pre>
</div>
<p>输出结果：</p> 
<div class="highlight">
 <pre><code class="language-html">This is a header.
&lt;div&gt;
    Override block 111
&lt;/div&gt;
&lt;div&gt;
    This is a default BODY 2222
&lt;/div&gt;
This is a footer.
</code></pre>
</div>
<h2 id="x796152" class="page-header"><span>1.6 总结</span></h2>
<p>不管采用哪种方式，jetbrick-template 都提供很大的灵活性来实现页面布局功能。</p>
<p>其中自定义 #tag 标签机制提供了非常强大功能，很容易实现其他模板引擎难以实现的功能，比如像 JSP Taglib 一样实现自定义标签，如 Cache Tag 将内容缓存到 memecached/redis 的标签等等。</p>
           	</div>
           </div>
		</div> 
 	</div>
    <!-- Footer
    ================================================== -->
    <footer class="bs-footer" role="contentinfo">
      <div class="container">
        <ul class="footer-links">
          <li>当前版本： v0.0.3</li>
          <li class="muted">&middot;</li>
          <li><a href="http://v2.bootcss.com/">Bootstrap 2.3.2 中文文档</a></li>
          <li class="muted">&middot;</li>
          <li><a href="http://www.bootcss.com">Bootstrap中文网</a></li>
          <li class="muted">&middot;</li>
          <li><a href="http://blog.getbootstrap.com">官方博客</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
          <li class="muted">&middot;</li>
          <li><a href="https://github.com/twbs/bootstrap/releases">Releases</a></li>
        </ul>
      </div>
    </footer>

    <!-- JS and analytics only. -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="./assets/js/bootstrap.js"></script>
<script src="http://cdn.bootcss.com/holder/2.0/holder.min.js"></script>
<script src="http://cdn.bootcss.com/highlight.js/7.3/highlight.min.js"></script>
<script >hljs.initHighlightingOnLoad();</script>
<script src="./assets/js/application.js"></script>
<script src="./assets/js/jquery.scrollToTop.min.js"></script>
<script text="javascript/text">
	$(document).ready(function(){
		$("#toTop").scrollToTop(1000);
  		$("table").addClass("table table-bordered");
  	});
</script>
  </body>
</html>
